<template>
  <div>
    <el-button type="primary" @click="AddSchedule = true">添加</el-button>
    <el-dialog title="添加排片" :visible.sync="AddSchedule" width="30%">
      <Schedule></Schedule>
    </el-dialog>
    <template>
      <el-table
        :data="
          scheduleIn
            .filter(
              (data) =>
                !search ||
                data.m_Item1.toLowerCase().includes(search.toLowerCase())
            )
            .slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        style="width: 100%;"
      >
        <el-table-column
          prop="m_Item1"
          label="电影名称"
          width="300"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="m_Item2" label="影厅" width="250" align="center">
        </el-table-column>
        <el-table-column prop="m_Item3" label="票价" width="250" align="center">
        </el-table-column>
        <el-table-column prop="m_Item4" label="开始时间" align="center">
        </el-table-column>
        <el-table-column prop="m_Item5" label="结束时间" align="center">
        </el-table-column>
        <el-table-column align="center">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
            />
          </template>
          <template slot-scope="m_Item6">
            <el-button
              type="danger"
              size="mini"
              @click="handleEdit(m_Item6.row)"
              >修改</el-button
            >
            
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div style="text-align: center;margin-top: 30px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="current_change"
      ></el-pagination>
    </div>
    <el-drawer title="修改排片信息" :visible.sync="UpSche" :with-header="false">
          <el-row>
      <el-col :span="24" style="text-align:center;margin-top:50px;">
        <span>电影：</span>
        <el-select v-model="MoID" placeholder="请选择电影">
          <el-option
            v-for="item in MoiveInfo"
            :key="item.MovieID"
            :label="item.MovieName"
            :value="item.MovieID"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="24" style="text-align:center;margin-top:50px;">
        <span>影厅：</span>
        <el-select v-model="HaID" placeholder="请选择影厅">
          <el-option
            v-for="item in HallInfo"
            :key="item.HallID"
            :label="item.HallName"
            :value="item.HallID"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
     <el-row>
      <el-col :span="24" style="text-align:center;margin-top:50px;">
        <span>票价：</span>
        <el-input
          v-model="Price1"
          style="width:42%;"
          placeholder="请输入价格"
        ></el-input>
      </el-col>
      <el-col :span="24" style="text-align:center;margin-top:50px;">
        <span>开始时间：</span>
        <el-date-picker
          v-model="StartTime1"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-col>
    </el-row>
    <el-col :span="24" style="text-align:center;margin-top:50px;">
        <el-button type="primary" @click="UpdaSch(this.SID.m_Item6)" round>修改</el-button>
      </el-col>
    </el-drawer>
  </div>
</template>
<script>
import Schedule from "@/views/Schedule";
export default {
  components: {
    Schedule,
  },
  data() {
    return {
      scheduleIn: [],
      total: 0,
      pagesize: 10,
      currentPage: 1,
      dialog: false,
      search: "",
      AddSchedule: false,
      UpSche: false,
      SID:[],
      MoiveInfo: [],
      HallInfo:[],
      MoID:"",
      HaID:"",
      Price1:"",
      StartTime1:""
    };
  },
  created() {
    this.Ajax.get("api/Schedule/GetScheduleAndMovie").then((M) => {
      this.scheduleIn = M.data;
      
      this.total = M.data.length;
    });
     this.Ajax.get("api/MovieInfoes/GetMovieInfo").then((M) => {
      this.MoiveInfo = M.data;
    });
    this.Ajax.get("api/Hall/GetHall").then((H) => {
      this.HallInfo = H.data;
    });
  },
  methods: {
    current_change: function(currentPage) {
      this.currentPage = currentPage;
    },
    handleEdit(row) {
        this.SID=row;
     
      this.UpSche = true;
    },
    UpdaSch(id){
      this.Ajax.post("api/Schedule/UpdataSch",{
        data: {
          ScheduleID:id,
          MovieID: this.MoID,
          HallID: this.HaID,
          Price: this.Price1,
          StartTime: this.StartTime1,
        },
      }).then(
        (s) => {
        if (s.data == 2) {
          this.$notify({
            title: "成功",
            message: "修改成功",
            type: "success",
          });
          window.location.reload();
        } else if (s.data == 1) {
          this.$notify({
            title: "警告",
            message: "该影厅此时间段有电影了，你想干嘛？",
            type: "warning",
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: "修改失败",
          });
        }
      })
    }
  },
};
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
